<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03-回调ref中回调执行的次数</title>
  <script src="../其他/js/react.development.js"></script>
  <script src="../其他/js/react-dom.development.js"></script>
  <!-- Don't use this in production: -->
  <script src="../其他/js/babel.min.js"></script>
  <!-- 添加了一个 PropTypes 对象, 可以对props属性进行限制 -->
  <script src="https://cdn.staticfile.org/prop-types/15.5.10/prop-types.js"></script>
</head>
<body>
  <div id="test"></div>
  <script type="text/babel">
  class Demo extends React.Component {
    state= { isHot: true }
   render() {
     const { isHot } = this.state
    //  写成内联形式更新组件是会调用两次
    // 将函数挂在组件实例上避免
     return (
       <div>
       <h2>今天天气很{isHot ? '炎热' : '凉爽'}</h2>
       {/*<input type="text" ref={(currentNode) => {this.input1 = currentNode;console.log('@', currentNode)}}/> <br/><br/>*/}
       <input ref={this.saveInput} type="text"/> <br/><br/>
       <button onClick={this.showInfo}>点我提示输入的数据</button>
       <button onClick={this.changeWeather}>点我切换天气</button>

       </div>
     )
   }
   showInfo = () => {
     const { input1 } = this
     alert(input1.value)
   }
   changeWeather = () => {
     const {isHot} = this.state
     this.setState({isHot: !isHot})
   }
   saveInput = (currentNode) => {
     this.input1 = currentNode
     console.log('@', currentNode)
   }
  }
  ReactDOM.render(<Demo/>, document.getElementById('test'))
  
  </script>
</body>
</html>